<template>
  <el-container direction="vertical">
      <el-row>
        <el-col :span="4">
          <el-input
            placeholder="请输入关键字"
            v-model="keywords" style="width: 100%"
            @keyup.native.enter="getServiceList"
            clearable
            prefix-icon="el-icon-search"
          >
          </el-input>
        </el-col>
        <el-col :span="2" >
          <el-button type="primary" @click="getServiceList">查询</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-table
          :data="serviceList"
          style="width: 100%"
          stripe
        >
          <el-table-column
            prop="id"
            label="报修ID"
            width="150">
          </el-table-column>
          <el-table-column
            prop="userName"
            label="报修人"
            width="180">
          </el-table-column>
          <el-table-column
            prop="typeName"
            label="报修类型"
            width="150">
          </el-table-column>
          <el-table-column
            prop="date"
            label="报修日期"
            width="150">
          </el-table-column>
          <el-table-column
            label="报修状态"
            width="150">
            <template slot-scope="scope">
              <!--未受理-->
              <el-tag type="info" v-if="scope.row.state === 0" >{{stateList[0]}}</el-tag>
              <!--已受理-->
              <el-tag v-if="scope.row.state === 1">{{stateList[1]}}</el-tag>
              <!--拒绝受理-->
              <el-tag type="danger" v-if="scope.row.state === 2">{{stateList[2]}}</el-tag>
              <!--受理成功-->
              <el-tag type="success" v-if="scope.row.state === 3">{{stateList[3]}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="getDetails(scope.row)">查看报修详情</el-button>
              <el-dropdown size="mini" split-button type="primary" @command="handleService"  v-if="user.role == '管理员'">
                操作
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="{id:scope.row.id,state:1}">接受报修</el-dropdown-item>
                  <el-dropdown-item :command="{id:scope.row.id,state:2}">拒绝报修</el-dropdown-item>
                  <el-dropdown-item :command="{id:scope.row.id,state:3}">处理成功</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                circle
                @click="handleEdit(scope.row)">
              </el-button>
              <el-button
                size="mini"
                type="danger"
                circle
                icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row)">
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <el-pagination
          background
          @current-change="currentChange"
          layout="prev, pager, next"
          :total="totalPage">
        </el-pagination>
      </el-row>
      <el-dialog
        :visible.sync="vis"
        title="详情"
        width="30%"
      >
        <el-card>
          <div style="min-height: 300px">{{this.detail.content}}</div>
        </el-card>
      </el-dialog>
      <el-dialog
        title="修改报修信息"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <div>
          <el-form :model="serviceInfo" ref="serviceInfo" label-width="90" size="small">
            <el-form-item label="报修类型" prop="typeId">
              <el-select v-model="serviceInfo.typeId" placeholder="请选择报修类型" style="width: 100%">
                <el-option
                  v-for="item in serviceTypes"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="报修详情" prop="content">
              <el-input type="textarea" :rows="5" v-model="serviceInfo.content" clearable placeholder="请输入报修详情"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitForm('serviceInfo')">修 改</el-button>
  </span>
      </el-dialog>
  </el-container>
</template>

<script>
import Qs from 'qs'
export default {
  data(){
    return{
      serviceList:[],
      keywords:'',
      currentPage:1,
      pageSize: 10,
      totalCount:0,
      totalPage:0,
      stateList:['未受理','已受理','拒绝受理','受理完成'],
      user: {},
      vis: false,
      detail: {},
      dialogVisible: false,
      serviceInfo: {},
      serviceTypes:[],
    }
  },
  computed: {
    search() {
      return this.keywords;
    }
  },
  watch: {
    search(newValue, oldValue) {
      if (newValue === "") {
        //如果为空，执行方法获取list
        this.getServiceList();
      }
    }
  },
  methods:{
    getDetails(row) {
      this.detail = row;
      this.vis = true;
    },
    handleEdit(row) {
      this.serviceInfo = row;
      this.dialogVisible = true;
    },
    getServiceTypes(){
      this.$http.get('/serviceType/query').then((response)=>{
        if(response.status === 200) {
          if (response.data.code === 10000) {
            this.serviceTypes = response.data.data;
          }else {
            this.$notify.error({
              title: '错误',
              message: response.data.msg,
              duration: 1000
            });
          }
        }else {
          this.$notify.error({
            title: '错误',
            message: response.status + response.statusText,
            duration: 1000
          });
        }
      })
    },
    getServiceList(){
      let userId = this.user.role === '管理员' ? '':this.user.id;
      this.$http.get('/service/query',{
        params:{
          keywords:this.keywords,
          pageSize:this.pageSize,
          userId,
          currentPage:this.currentPage
        }
      }).then((response)=>{
        if(response.status === 200){
          if(response.data.code === 10000){
            this.totalCount = response.data.data.totalCount;
            this.totalPage = response.data.data.totalPage * 10;
            this.serviceList = response.data.data.data;
            console.log(response.data.data.data);
          }else{
            this.serviceList = [];
            this.$notify.error({
              title: '错误',
              message: response.data.msg,
              duration: 1000
            });
          }
        }else{
          this.$notify.error({
            title: '错误',
            message: response.status + response.statusText,
            duration: 1000
          });
        }
      })
    },
    currentChange(pageNo){
      this.currentPage = pageNo;
      this.getServiceList();
    },
    handleService(row){
      let params = Qs.stringify(row)
      this.$http.post('/service/state',params)
        .then((response)=>{
          if(response.status === 200){
            if(response.data.code === 10000){
              this.$notify({
                title: '成功',
                message: '处理成功',
                type:'success',
                duration: 1000
              });
              this.getServiceList();
            }else{
              this.$notify.error({
                title: '错误',
                message: response.data.msg,
                duration: 1000
              });
            }
          }else{
            this.$notify.error({
              title: '错误',
              message: response.status + response.statusText,
              duration: 1000
            });
          }
        })
    },
    handleDelete(index,row){
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = Qs.stringify({
          id:row.id
        })
        this.$http.post('/service/del',params)
          .then((response)=>{
            if(response.status === 200){ // 先判断状态码
              if(response.data.code === 10000){ // 再判断结果码
                this.$notify({
                  title: '成功',
                  message: response.data.data,
                  type:'success'
                });
                this.getServiceList();
              }else{
                this.$notify.error({
                  title: '错误',
                  message: response.data.msg
                });
              }
            }else{
              this.$notify.error({
                title: '错误',
                message: response.status + response.statusText
              });
            }
          })
      });
    },
    submitForm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = Qs.stringify(this.serviceInfo);
          this.$http.put('/service/updateService',params).then((response)=>{
            if(response.status === 200){
              if(response.data.code === 10000){
                this.$notify({
                  title: '修改成功！',
                  type: 'success',
                  duration: 1000
                })
                this.getServiceList();
                this.dialogVisible = false;
              }else{
                this.$notify.error({
                  title: '错误',
                  message: response.data.msg,
                  duration: 1000
                });
              }
            }else{
              this.$notify.error({
                title: '错误',
                message: response.status + response.statusText,
                duration: 1000
              });
            }
          })
        }
      });
    },
  },
  created() {
    this.user = JSON.parse(sessionStorage.getItem("user"));
    this.getServiceList();
    this.getServiceTypes();
  }
}
</script>

<style scoped>
.el-row{
    margin-bottom: 15px;
}
</style>
